<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        canvas {
            border: 1px dashed red;
        }
    </style>
</head>
<body>
    <canvas></canvas>
</body>
<script>
    // var cas = document.querySelector( 'canvas' );
    // // console.log( cas );
    // var ctx = cas.getContext( '2d' );  // 获得绘图工具
    // // 绘制矩形
    // ctx.strokeRect( 150, 10, 100, 50 ); 

// var cas=document.querySelector('canvas');
var cas=document.querySelectorAll('canvas')[0];
console.log(cas);

var ctx=cas.getContext('2d');

ctx.strokeRect(0,0,100,100)



</script>
</html>